<template>
  <!--个人信息-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <Row :gutter="16">
        <i-col span="6">
          <ngn :data="data" :activeIndex="activeIndex"></ngn>
        </i-col>
        <i-col span="18">
          <div class="com">
            <p class="p">
              <Icon type="ios-pin"/>
              <span>您现在的位置是:</span><span class="span">{{data.title}}</span><span> > </span><span
              class="span">个人信息</span>
            </p>
          </div>
          <div style="padding: 10px 0" v-show="show">
            <Row>
              <i-col span="12">
                <p class="p1"><span>姓名:</span><span>{{personalDetails.realName}}</span></p>
                <p class="p1"><span>单位:</span><span>{{personalDetails.unit}}</span></p>
                <p class="p1"><span>邮箱:</span><span>{{personalDetails.mail}}</span></p>
              </i-col>
              <i-col span="12">
                <p class="p1"><span>职称:</span><span>{{personalDetails.title}}</span></p>
                <p class="p1"><span>科室:</span><span>{{personalDetails.dept}}</span></p>
                <p class="p1"><span>联系电话:</span><span>{{personalDetails.phone}}</span></p>
              </i-col>
              <Button @click="alter">更改个人信息</Button>
            </Row>
          </div>
          <div style="padding: 10px 0" v-show="change">
            <Row>
              <i-col span="24">
                <p class="p2"><span>姓名:</span><Input disabled v-model="personalDetails.realName" style="width: 300px"/>
                </p>
                <p class="p2"><span>职称:</span><Input v-model="personalDetails.title" style="width: 300px"/></p>
                <p class="p2"><span>单位:</span><Input v-model="personalDetails.unit" style="width: 300px"/></p>
                <p class="p2"><span>科室:</span><Input v-model="personalDetails.dept" style="width: 300px"/></p>
                <p class="p2"><span>联系电话:</span><Input v-model="personalDetails.phone" style="width: 300px"/></p>
                <p class="p2"><span>邮箱:</span><Input v-model="personalDetails.mail" style="width: 300px"/></p>
                <p>
                  <Button type="primary" @click="add">保存</Button>
                  <Button type="primary" @click="alter">取消</Button>
                </p>
              </i-col>
            </Row>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'

  export default {
    components: {
      carousel, ngn
    },
    data() {
      return {
        activeIndex: 0,
        autoplaySpeed: 100000,
        workTrendLink: '',
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        data: {
          title: '个人中心',
          list: [
            {list: '个人信息', link: 'personalInformation',},
            {list: '稿件直投', link: 'ManuscriptDirectInvestment',},
            {list: '稿件评估', link: 'TheManuscriptEvaluation',},
            {list: '账号安全', link: 'accountSecurity',},
            {list: '投诉建议', link: 'complaintAndAdvice',},
          ],
        },
        show: true,
        change: false,
        personalDetails: {
          id: '',
          realName: '',
          title: '',
          unit: '',
          dept: '',
          phone: '',
          mail: '',
        },
        url: this.$api.url
      }
    },
    mounted() {
      this.id = localStorage.getItem('ms_userid');
      this.dataArray();
    },
    methods: {
      dataArray() {
        this.$axios.get(this.url + '/user/selectMessage/' + this.id).then((res) => {
          if (res.data.data) {
            this.personalDetails.id = res.data.data.id;
            this.personalDetails.realName = res.data.data.realName;
            this.personalDetails.title = res.data.data.title;
            this.personalDetails.unit = res.data.data.unit;
            this.personalDetails.dept = res.data.data.dept;
            this.personalDetails.phone = res.data.data.phone;
            this.personalDetails.mail = res.data.data.mail;
          }
        });
      },
      alter() {
        this.show = !this.show;
        this.change = !this.change
      },
      add() {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(this.personalDetails),
          url: this.url + '/user/UpUser',
        }).then((res) => {
          if (res.data.code == 200) {
            this.show = true;
            this.change = false;
          }
        })
      },
    },
  }
</script>

<style scoped>
  .com .p {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #000;
  }

  .span {
    padding: 0 10px;
  }

  .p1 {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 10px;
  }

  .p2 {
    margin: 20px 5px;
    font-size: 13px;
    font-weight: bold;
  }

  .p2 > span {
    display: inline-block;
    width: 80px;
  }
</style>
